<!-- 矿山评价 -->
<template>
  <section class="content">
    <div>
       <div id="chart">
      <vo-edit :data="chartData" :draggable="true" :direction='direction' :toggleCollapse="false"
      :exportButton="true" :toggleSiblingsResp="true" exportButtonName="导出" exportFilename="指标权重" ></vo-edit>
       </div>
      <div id="edit-panel" class="view-state edit-container edit">
        <div class="item item-half">
          <div class="input-node-container">
            <label class="selected-node-group">被选节点：</label>
            <input type="text" id="selected-node" class="selected-node-group new-node" />
          </div>
          <div>
            <label>新节点：</label>
            <ul id="new-nodelist">
              <li>
                <input type="text" class="new-node" />
              </li>
            </ul>
          </div>
        </div>
        <div id="node-type-panel" class="radio-panel item">
          <input type="radio" name="node-type" id="rd-parent" value="parent" class />
          <label for="rd-parent">父节点</label>
          <input type="radio" name="node-type" id="rd-child" value="children" />
          <label for="rd-child">子节点</label>
          <input type="radio" name="node-type" id="rd-sibling" value="siblings" />
          <label for="rd-sibling">同级节点</label>
        </div>
        <div class="item">
          <el-button type="primary" @click="addNodes">增加</el-button>
          <el-button type="danger" @click="deleteNodes">删除</el-button>
          <!-- <el-button type="primary" @click="exportJSON">导出</el-button> -->
        </div>
      </div>
    </div>
    
  </section>
</template>
<script>
import { VoEdit } from 'vue-orgchart'

export default {
components: { VoEdit },
  data() {
    return {
        chartData: {
        name: '山水林田湖草',
        children: [
          {
            name: '矿山评价',
            children: [
              { name: '矿山结构',
              children: [
                { name: '植被覆盖度'},
                { name: '生物多样性'},
                { name: '土地复垦面积'},
                { name: '景观完整性'}
              ]},
              { name: '生态破坏',
              children: [
                { name: '土地毁损度'},
                { name: '固体废弃物安置面积'},
                { name: '水污染程度'}
              ]},
              { name: '工程措施',
              children: [
                { name: '道路设施完善率'}
              ]},
            ]
          },
          {
            name: '河流评价',
            children: [
              { name: '河流结构',
              children: [
                { name: '河流总长度'},
                { name: '生物多样性'},
                { name: '河流连通性'}
              ]},
              { name: '水质水量',
              children: [
                { name: '河流水质'},
                { name: '流量保证率'}
              ]},
              { name: '工程措施',
              children: [
                { name: '河道生态整治率'},
                { name: '防洪完善率'},
                { name: '人工湿地面积'},
                { name: '污水处理率'}
              ]},
            ]
          },
          {
            name: '森林评价',
            children: [
              { name: '森林结构',
              children: [
                { name: '森林覆盖率'},
                { name: '生物多样性'},
                { name: '土壤肥力水平'}
              ]},
              { name: '生态功能',
              children: [
                { name: '水土保持能力'},
                { name: '木材利用率'},
                { name: '水源涵养能力'}
              ]},
              { name: '工程措施',
              children: [
                { name: '水土保持造林'},
                { name: '封山育林'}
              ]},
            ]
          },
          {
            name: '农田评价',
            children: [
              { name: '农田结构',
              children: [
                { name: '农田总面积'},
                { name: '生物多样性'},
                { name: '土壤条件'}
              ]},
              { name: '生态功能',
              children: [
                { name: '农田生产力'}
              ]},
              { name: '工程措施',
              children: [
                { name: '土壤综合整治'},
                { name: '工程设备配套率'}
              ]},
            ]
          },
          {
            name: '湖泊评价',
            children: [
              { name: '湖泊结构',
              children: [
                { name: '湖泊总面积'},
                { name: '生物多样性'},
                { name: '河湖连通性'}
              ]},
              { name: '水质水量',
              children: [
                { name: '湖泊蓄水量'},
                { name: '湖泊水质'}
              ]},
              { name: '工程措施',
              children: [
                { name: '调蓄能力'},
                { name: '湖岸线整治'},
                { name: '周边湿地建设'}
              ]},
            ]
          },
          {
            name: '草地评价',
            children: [
              { name: '草地结构',
              children: [
                { name: '草地盖度'},
                { name: '土壤条件'},
                { name: '生态多样性'}
              ]},
              { name: '生态功能',
              children: [
                { name: '水源涵养量'},
                { name: '净初级生产力'}
              ]},
              { name: '工程措施',
              children: [
                { name: '生态护岸'}
              ]}
            ]
          },
          {
            name: '社会绩效评价',
        children: [
          {
            name: '社会经济',
            children: [
              { name: '就业几率'},
              { name: '农民人均收入'},
              { name: 'GDP增长率'}
               ]
          },
          {
            name: '社会环境',
            children: [
              { name: '自然灾害'},
              { name: '群众知情权'},
              { name: '居民满意度'}]
          }]
          },
          {
            name: '管理绩效评价',
            children: [
              {
                name: '财务管理',
                children: [
                  { name: '资金制度健全性'},
                  { name: '支出结构合理性'},
                  { name: '资金到位率'}
                  ]
              },
              {
                name: '项目组织',
                children: [
                  { name: '项目完成进度'},
                  { name: '项目制度健全性'},
                  { name: '阶段材料完备度'}
                ]
              }
            ]
          },
        ]
    },
    direction:"l2r",
      url:  'http://perrin.oss-cn-beijing.aliyuncs.com/cumtb/jixiaopingjia/1kuangshanpingjia.jpg',
      id: null,
      project: null,
      projectList: [],
      input: null,
      currentPage: 1,
      totalRecord: 0,
      totalPage: 0,
      tableData: [],
      detail: false,
      photo: [],
      formLabelWidth: "100px",
      riskRecord: {
        id: "",
        title: "111",
        brief: "222",
        photo: []
      },
      detailRecord:[{
        id: "1",
        title: "我是标题",
        brief: "我是日志",
        photo: "我是图片"
      }]
    };
  },
  methods: {
  

    //时间格式化
    dateFormat: function(row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },

    //OrgChart
    mountOrgchart() {
      this.$children.forEach((item) => {
        item.orgchart !== undefined ? this.orgchart = item.orgchart : null
      })
    },
    
    addNodes() {
      let chartContainer = document.getElementById('chart-container')
      let nodeVals = []

      Array.from(document.getElementById('new-nodelist').querySelectorAll('.new-node'))
        .forEach(item => {
          let validVal = item.value.trim()

          if (validVal) {
            nodeVals.push(validVal)
          }
        })
      let selectedNode = document.getElementById(document.getElementById('selected-node').dataset.node)

      if (!nodeVals.length) {
       this.$message({
            type: "warning",
            message: "请输入新节点的值！"
          });
        return
      }
      let nodeType = document.querySelector('input[name="node-type"]:checked')

      if (!nodeType) {
       this.$message({
            type: "warning",
            message: "请选择节点类型！"
          });
        return
      }
      if (nodeType.value !== 'parent' && !document.querySelector('.orgchart')) {
        this.$message({
            type: "warning",
            message: "请先创建根节点！"
          });
        return
      }
      if (nodeType.value !== 'parent' && !selectedNode) {
        this.$message({
            type: "warning",
            message: "请选择节点！"
          });
        return
      }
      if (nodeType.value === 'parent') {
        if (!chartContainer.children.length) {// if the original chart has been deleted
          this.orgchart = new OrgChart({
            'chartContainer': '#chart-container',
            'data': { 'name': nodeVals[0] },
            'parentNodeSymbol': 'fa-th-large',
            'createNode': function (node, data) {
              node.id = this.getId()
            }
          })
          this.orgchart.chart.classList.add('view-state')
        } else {
          this.orgchart.addParent(chartContainer.querySelector('.node'), { 'name': nodeVals[0], 'Id': this.getId() })
        }
      } else if (nodeType.value === 'siblings') {
        this.orgchart.addSiblings(selectedNode, {
          'siblings': nodeVals.map(item => {
            return { 'name': item, 'relationship': '110', 'Id': this.getId() }
          })
        })
      } else {
        let hasChild = selectedNode.parentNode.colSpan > 1

        if (!hasChild) {
          let rel = nodeVals.length > 1 ? '110' : '100'

          this.orgchart.addChildren(selectedNode, {
            'children': nodeVals.map(item => {
              return { 'name': item, 'relationship': rel, 'Id': this.getId() }
            })
          })
        } else {
          this.orgchart.addSiblings(closest(selectedNode, el => el.nodeName === 'TABLE').querySelector('.nodes').querySelector('.node'),
            { 'siblings': nodeVals.map(function (item) { return { 'name': item, 'relationship': '110', 'Id': this.getId() } })
            })
        }
      }
    },
    deleteNodes() {
      let sNodeInput = document.getElementById('selected-node')
      let sNode = document.getElementById(sNodeInput.dataset.node)

      if (!sNode) {
        this.$message({
            type: "warning",
            message: "请选择节点！"
          });
        return
      } else if (sNode === document.querySelector('.orgchart').querySelector('.node')) {
        if (!window.confirm('确定要删除吗?')) {
          return
        }
      }
      this.orgchart.removeNodes(sNode)
      sNodeInput.value = ''
      sNodeInput.dataset.node = ''
    },
    exportJSON() {
      let datasourceJSON = {}
      let ChartJSON = this.orgchart.getChartJSON()
      datasourceJSON = JSON.stringify(ChartJSON, null, 2)
      if(document.getElementsByTagName('code')[1]) {
        let code = document.getElementsByTagName('code')[1]
        code.innerHTML = datasourceJSON
      }
      return datasourceJSON
    },
    getId() {
      return (new Date().getTime()) * 1000 + Math.floor(Math.random() * 1001)
    }
    
  },
  mounted() {
    this.projectModel
      .projectGetAll()
      .then(res => {
        this.projectList = res.data;
      })
      .catch(err => {
        console.log(err.message);
      });
    let queryData = {
      currentPage: "1",
      pageSize: "10"
    };
    this.riskTabModel
      .queryList(queryData)
      .then(res => {
        this.totalRecord = res.data.totalRecord;
        this.totalPage = res.data.totalPage;
        this.tableData = res.data.list;
      })
      .catch(err => {
        console.log(err.message);
      });

      //OrgChart
      this.$nextTick(
      this.mountOrgchart()
    )
  }
};
</script>


<style scoped>

.edit{
text-align:center;
}

.orgchart{
  font-size:25px;
  height:30px;
  line-height: 30px;
  border-radius:4px 4px 4px 4px;
}
#brief {
  white-space: normal;
  word-break: break-all;
  word-wrap: break-word;
}
.content {
  overflow-y: auto;
  padding-top: 10px;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
}
.content >>> .l2r {
    margin-left: -400px;
    margin-top: 800px ;
}

</style>

